<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12">
        <el-card>
          <h2>若依nodejs后台管理框架</h2>
          <p>前端：用的是若依Vue3.0版本，并新增<el-tag>hooks</el-tag>，更加优雅</p>
          <p>后端：作者自己用<el-tag>nodejs</el-tag>实现的，基于<el-tag>Midway框架</el-tag></p>
          <p>计划录一期视频教程，晚一点更新链接(抖音：前端没钱)</p>
          <p><b>当前版本:</b> <span>v{{ version }}</span></p>
          <p><el-tag type="danger">&yen;免费开源</el-tag> <text style="font-size: 12px;">(代码整理中...)</text></p>
          <el-button type="primary" icon="Cloudy" plain @click="pageTo">访问码云</el-button>
          <el-button icon="HomeFilled" plain @click="pageTo">访问主页</el-button>
          <el-alert title="如果有写错或不好的地方，欢迎指正，联系方式右下角" type="warning" :closable="false" style="margin-top: 10px;" />
        </el-card>
      </el-col>

      <el-col :sm="24" :lg="12">
        <el-card>
          <el-row>
            <el-col :span="12">
              <h2>技术选型</h2>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <h4>后端技术</h4>
              <ul>
                <li>Nodejs</li>
                <li>MidwayJs</li>
                <li>Redis</li>
                <li>JWT</li>
                <li>Typeorm</li>
                <li>Mysql</li>
                <li>Exceljs</li>
                <li>TypeScript</li>
                <li>bcryptjs</li>
                <li>...</li>
              </ul>
            </el-col>
            <el-col :span="12">
              <h4>前端技术</h4>
              <ul>
                <li>Vue3</li>
                <li>Vite</li>
                <li>Pinia</li>
                <li>Element-Plus</li>
                <li>Axios</li>
                <li>Sass</li>
                <li>Quill</li>
                <li>Echarts</li>
                <li>bcryptjs</li>
                <li>...</li>
              </ul>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-divider />
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>项目特色</span>
            </div>
          </template>
          <div class="body">
            <el-descriptions :column="1" direction="vertical" border>
              <el-descriptions-item label="接口高度还原">nodejs高度还原Spring Boot的95%以上接口，包括数据格式等</el-descriptions-item>
              <el-descriptions-item label="Redis配置抽离">在若依基础上，新增了接口加密开关、操作日志开关、登录日志开关、权限校验开关、验证码开关等，更加方便安全</el-descriptions-item>
              <el-descriptions-item label="注释清晰">逻辑代码都有注释，包含接口的实现思路，浅显易懂</el-descriptions-item>
              <el-descriptions-item label="代码预览">前端页面有预览后端代码的入口，便于大家按需预览</el-descriptions-item>
              <el-descriptions-item label="装饰器封装">封装<el-tag>权限校验</el-tag>、<el-tag>操作日志</el-tag>等装饰器，给你<el-tag>Java SpringBoot</el-tag>的初体验</el-descriptions-item>
              <el-descriptions-item label="DTO校验">字段验证抽离，结合<el-tag>TypeScript</el-tag>，参数强类型校验，保证准确运行</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>完成情况</span>
            </div>
          </template>
          <el-descriptions :column="1">
            <el-descriptions-item label="登录、验证码生成">
              <el-tag>100%</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="账号密码加密">
              <el-tag>100%</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="基本信息、获取路由接口">
              <el-tag>100%</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="导出功能封装">
              <el-tag>100%</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="导入Excel与解析封装">
              <el-tag>100%</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="个人信息、修改头像">
              <el-tag>100%</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="Redis缓存配置">
              <el-tag>90%</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="其他系统模块已完成的">
              <div class="gap">
                <el-tag>用户管理</el-tag>
                <el-tag>角色管理</el-tag>
                <el-tag>菜单管理</el-tag>
                <el-tag>部门管理</el-tag>
                <el-tag>菜单管理</el-tag>
                <el-tag>部门管理</el-tag>
                <el-tag>岗位管理</el-tag>
                <el-tag>字典管理</el-tag>
                <el-tag>参数设置</el-tag>
                <el-tag>通知公告</el-tag>
                <el-tag>操作日志</el-tag>
                <el-tag>登录日志</el-tag>
                <el-tag>上传文件模块</el-tag>
                <el-tag type="warning">定时任务(70%)</el-tag>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="未完成或待办">
              <div class="gap">
                <el-tag type="warning">生成代码</el-tag>
                <el-tag type="warning">在线用户</el-tag>
                <el-tag type="warning">强退、解锁等操作</el-tag>
                <el-tag type="warning">获取登录信息的完善</el-tag>
                <el-tag type="warning">Swagger接口文档</el-tag>
                <el-tag type="warning">上传文件优化</el-tag>
                <el-tag type="warning">绑定域名</el-tag>
                <el-tag type="warning">自动化部署</el-tag>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8">
        <el-card class="update-log">
          <template v-slot:header>
            <div class="clearfix">
              <span>作者简介</span>
            </div>
          </template>
          <el-descriptions :column="1">
            <el-descriptions-item label="网名">前端没钱（CSDN、今日头条 Gitee 同名）</el-descriptions-item>
            <el-descriptions-item label="籍贯">江苏连云港海州区</el-descriptions-item>
            <el-descriptions-item label="工作">程序员、搬砖</el-descriptions-item>
            <el-descriptions-item label="爱好">下棋、日剧、学日语、撸猫</el-descriptions-item>
            <el-descriptions-item label="微信">menjinka66 （小号）</el-descriptions-item>
            <el-descriptions-item label="邮箱">1915766026@qq.com</el-descriptions-item>
            <el-descriptions-item label="码云Gitee">
              <el-link type="primary" href="https://gitee.com/ruirui-study" target="_blank">前端没钱</el-link>
            </el-descriptions-item>
            <el-descriptions-item label="视频教程">后面会录制的</el-descriptions-item>
            <el-descriptions-item label="掌握的皮毛技术">
              <div class="gap">
                <el-tag>Vue</el-tag>
                <el-tag>Electron</el-tag>
                <el-tag>Nodejs</el-tag>
                <el-tag>React</el-tag>
                <el-tag>Flutter</el-tag>
                <el-tag>小程序</el-tag>
                <el-tag>Charles</el-tag>
                <el-tag>Echarts</el-tag>
                <el-tag>HLS</el-tag>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { useMessage } from '@/hooks/useMessage';
const message = useMessage();

const pageTo = () => {
  message.notifyWarning('代码整理中，请稍等...')
}

const version = ref('1.0.0')
</script>

<style scoped lang="scss">
.gap {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
}
</style>

